<template>
  <view class="info">
    <view class="contact" >
      <view :class="showContactCardButton ? ['title', 'title-content'] :['title', 'title-content','full']" v-if="concatInfo.liaisonName">
        {{ concatInfo.liaisonName }}
      </view>
      <view v-if="showContactCardButton" class="card" @click="showContactCard">联络站名片</view>
    </view>
    <view class="info-txt icon-container" v-if="concatInfo.contact && concatInfo.contact!='暂无'">
      <i-icon size="30rpx" name="user-3-line"></i-icon>
      {{ `${concatInfo.contact}(${concatInfo.contactPhone})` }}
    </view>
    <view class="info-txt icon-container" v-if="concatInfo.workTime && concatInfo.workTime!='暂无'">
      <i-icon size="30rpx" name="time-line"></i-icon>
      工作时间：{{ concatInfo.workTime }}
    </view>
    <view class="info-txt " v-if="concatInfo.liaisonAddress " @click="navigation(concatInfo)" >
      <i-icon size="30rpx" name="map-pin-line"></i-icon>
      {{ concatInfo.liaisonAddress }}   <text >（地图导航）</text>
    </view>
  </view>
</template>

<script>
import {contactCardPath} from "@/until/publicConfig";
import {baseMixins} from "@/mixins/baseMixins";

export default {
  name: "contact-info",
  mixins: [baseMixins],
  props: {
    concatInfo: {
      type: Object,
    },
    showContactCardButton: {
      type: Boolean,
      default: false
    }
  },
  methods: {
	  navigation(item) {
		  
	      let {latitude, longitude, liaisonName: name, address } = item
	      uni.openLocation({
	        latitude,
	        longitude,
	        name,
	        address,
	        scale: 18,
	        success: function (res) {
	        }
	      })
	    },
    showContactCard() {
      let {concatInfo} = this
      this.goSubPage(`${contactCardPath}?concatInfo=${encodeURIComponent(JSON.stringify(concatInfo))}`)
    },
  }
}
</script>

<style scoped lang="scss">
.info {
  margin: 20rpx 30rpx 0 30rpx;

  view {
    margin: 15rpx 0;
  }

  .contact {
    display: flex;
    width: 100%;

    .title {
      width: calc(100% - 240rpx);
      margin-right: 15rpx;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;

      &.full {
        width: 100%;
      }
    }

    .card {
      height: 63rpx;
      width: 225rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right, #f84b34, #c11600);
      border-radius: 50rpx;
      color: #FFFFFF;
      padding: 10rpx 30rpx;
    }
  }

  .info-txt {
    font-weight: normal;
    font-size: 30rpx;
    color: #222222;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20rpx;

    .info-icon {
      margin-right: 10rpx;
    }
  }
}
</style>
